<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>欢迎光临博客</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/img/favicon.png">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layuiadmin/layui/css/layui.css" media="all">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/vendor/font-awesome/css/font-awesome.min.css">
    <!-- Custom icon font-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/fontastic.css">
    <!-- Fancybox-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/vendor/@fancyapps/fancybox/jquery.fancybox.min.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.pink.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/custom.css">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
    <style>


    </style>
</head>
<body>
<jsp:include page="common/header.jsp"/>
<!-- Hero Section-->
<section
        style="background: url(./img/background.jpg); background-size: cover; background-position: center center"
        class="hero">
    <div class="container">

        <div class="row">
            <div class="col-lg-7">
                <h1>Welcome to Darren's blog</h1>
            </div>
        </div>
    </div>
</section>
<div class="container">
    <div class="row">
        <%--        start main--%>
        <!-- Latest Posts -->
        <main class="posts-listing col-lg-8 intro">
            <div class="container">
                <div class="row">
                    <%--博客页面开始--%>
                    <!-- post -->
                    <c:forEach items="${articles}" var="article">
                        <div class="post col-xl-6">
                            <div class="post-thumbnail"><a
                                    href="${pageContext.request.contextPath}/index?method=get&id=${article.getId()}">
                                <img src="${article.getImage()}" alt="..."
                                     class="img-fluid" style="height: 200px;width: 300px"></a></div>
                            <div class="post-details">
                                <div class="post-meta d-flex justify-content-between">
                                    <div class="date meta-last">${article.getPhTime()}</div>
                                    <div class="category"><a href="#"></a></div>
                                </div>
                                <!--点击题目跳转-->
                                <a href="${pageContext.request.contextPath}/index?method=get&id=${article.getId()}">
                                    <h3 class="h4">${article.getTitle()}</h3></a>
                                <p class="text-muted">${article.getContent()}......</p>
                                <footer class="post-footer d-flex align-items-center">
                                    <a href="#" class="author d-flex align-items-center flex-wrap">
                                        <div class="avatar"><img src="img/avatar.jpg" alt="..." class="img-fluid">
                                        </div>
                                    </a>
                                    <div class="date"><i class="icon-clock">${article.getPhTime()}</i></div>
                                </footer>
                            </div>
                        </div>
                    </c:forEach>
                </div>
                <!-- 分页-->
                <!-- Pagination -->
                <nav aria-label="Page navigation example">
                    <c:if test="${pageActive==true}">
                        <a href="${pageContext.request.contextPath}/index">返回首页</a>
                        <!--页数如果小于1 就不显示-->
                        <c:if test="${currentPage>1}">
                            <a href="${pageContext.request.contextPath}/index?currentPage=${currentPage-1}">上一页</a>
                        </c:if>

                        <c:if test="${currentPage<totalPage}">
                            <a href="${pageContext.request.contextPath}/index?currentPage=${currentPage+1}">下一页</a>
                        </c:if>
                    </c:if>
                </nav>
            </div>
        </main>
        <%--        end main--%>
        <jsp:include page="common/aside.jsp"/>
    </div>
</div>
<!-- Page Footer-->
<%--<jsp:include page="common/footer.jsp"/>--%>
<!-- JavaScript files-->
<script src="${pageContext.request.contextPath}/vendor/jquery/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/vendor/popper.js/umd/popper.min.js"></script>
<script src="${pageContext.request.contextPath}/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/vendor/jquery.cookie/jquery.cookie.js"></script>
<script src="${pageContext.request.contextPath}/vendor/@fancyapps/fancybox/jquery.fancybox.min.js"></script>
<script src="${pageContext.request.contextPath}/js/front.js"></script>
<script src="${pageContext.request.contextPath}/layuiadmin/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/layuiadmin/layui/layui.js"></script>

</body>
</html>
